<template>
	<view class="classification-container">
		<!-- 生活分类 -->
		<view class="category-section">
			<up-divider :text="'生活相关 · LIFE'" border-color="#ff6b6b" color="#ff6b6b"></up-divider>
			<up-grid :col="3" :gutter="20">
				<up-grid-item v-for="(item, index) in list2" :key="index" @click="skipFenleiDetail(item.title)"
					class="grid-card">
					<view class="grid-content">
						<image class="category-icon" :src="item.name" mode="aspectFit" />
						<text class="category-title">{{ item.title }}</text>
					</view>
				</up-grid-item>
			</up-grid>
		</view>

		<!-- 技术分类 -->
		<view class="category-section">
			<up-divider :text="'技术相关 · TECH'" border-color="#4d8af0" color="#4d8af0"></up-divider>
			<up-grid :col="3" :gutter="20">
				<up-grid-item v-for="(item, index) in list1" :key="index" @click="skipFenleiDetail(item.title)"
					class="grid-card">
					<view class="grid-content">
						<image class="category-icon" :src="item.name" mode="aspectFit" />
						<text class="category-title">{{ item.title }}</text>
					</view>
				</up-grid-item>
			</up-grid>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	// 创建响应式数据  
	const list1 = reactive([{
			name: '../../static/qd.png',
			title: '前端'
		},
		{
			name: '../../static/hd.png',
			title: '后端'
		},
		{
			name: '../../static/android.png',
			title: 'Android'
		},
		{
			name: '../../static/ios.png',
			title: 'iOS'
		},
		{
			name: '../../static/rgzn.png',
			title: '人工智能'
		},
		{
			name: '../../static/czxt.png',
			title: '操作系统'
		}
	]);

	const list2 = reactive([{
			name: '../../static/yd.png',
			title: '阅读'
		},
		{
			name: '../../static/sh.png',
			title: '记录生活'
		}
	])

	// 跳转分类详情页面
	const skipFenleiDetail = (title) => {
		uni.navigateTo({
			url: `/pages/fenlei_detail/fenlei_detail?title=${title}`
		})
	}
</script>
<style lang="scss" scoped>
	.classification-container {
		padding: 30rpx;
		background: #f8f9fa;
		min-height: 100vh;
		box-sizing: border-box;

		.category-section {
			margin-bottom: 50rpx;
			background: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		}

		.grid-card {
			transition: all 0.3s ease;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 20rpx 0;

			&:active {
				transform: scale(0.96);
			}
		}

		.grid-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 20rpx;
		}

		.category-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 30rpx;
			filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
		}

		.category-title {
			font-size: 28rpx;
			color: #2c3e50;
			font-weight: 500;
			text-align: center;
			line-height: 1.4;
		}

		/* 分类颜色主题 */
		.life-section {
			.category-icon {
				filter: hue-rotate(40deg);
			}

			.category-title {
				color: #ff6b6b;
			}
		}

		.tech-section {
			.category-icon {
				filter: hue-rotate(220deg);
			}

			.category-title {
				color: #4d8af0;
			}
		}
	}
</style>